<template>
  <div class="user-account-box">
    <div class="icons-user-pic">
      <img src="https://chat.juanpi.com/chat/images/icons/avatar-seller.png">
    </div>
    <div class="load-wrap">
      <div class="load-name">jp_272872565</div></div>
  </div>
</template>

<script>
    export default {
      name: "UserAccount"
    }
</script>

<style scoped lang="less">
  .user-account-box {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-content: center;
    height: 60px;
    padding: 2.5px 0 0 10px;
    .icons-user-pic {
      img {
        display: block;
        width: 44px;
        height: 44px;
        border: 5px solid #ff6a6f;
        border-radius: 50%;
      }
    }
    .load-wrap {
      .load-name {
        margin-top: 7px;
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 46px;
        color: white;
        margin-left: 10px;
      }
    }
  }
</style>
